import React from 'react'
import axios from 'axios'
import { useState, useEffect } from 'react'
import { Table } from 'antd'

export default function Home() {
  const [img, setimg] = useState('')
  const [weather, setweather] = useState([])
  const [city, setcity] = useState('')
  useEffect(() => {
    axios.get('https://api.vvhan.com/api/moyu').then(res => {
      setimg(res.config.url)
    })
    axios.get('https://api.vvhan.com/api/weather?city=' + '长沙市' + '&type=' + 'week').then(res => {
      setweather(res.data.data)
      setcity(res.data)
    })
  }, [])

  const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      align: 'center',
      render(date) {
        return <b>{date}</b>
      },
    },
    {
      title: '星期',
      dataIndex: 'week',
      align: 'center',
      render(week) {
        return <b>{week}</b>
      },
    },
    {
      title: '天气',
      dataIndex: 'type',
      align: 'center',
      render(type) {
        return <b>{type}</b>
      },
    },
    {
      title: '最高温度',
      dataIndex: 'high',
      align: 'center',
      render(high) {
        return <b>{high}</b>
      },
    },
    {
      title: '最低温度',
      dataIndex: 'low',
      align: 'center',
      render(low) {
        return <b>{low}</b>
      },
    },
    {
      title: '风向',
      dataIndex: 'fengxiang',
      align: 'center',
      render(fengxiang) {
        return <b>{fengxiang}</b>
      },
    },
    {
      title: '风级',
      dataIndex: 'fengli',
      align: 'center',
      render(fengli) {
        return <b>{fengli}</b>
      },
    },
  ]

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <div style={{ width: '51%', height: '800px', paddingTop: '0px', boxSizing: 'border-box' }}>
        <img style={{ width: '100%', height: '100%' }} src={img}></img>
      </div>
      <div style={{ width: '46%', height: '800px', paddingTop: '0px', boxSizing: 'border-box' }}>
        <h2>当前所在位置: {city.city}</h2>
        <Table dataSource={weather} columns={columns} rowKey={(item) => item.date}></Table>
      </div>
    </div>
  )
}
